<script setup lang="ts">
import type { IMenu } from '../../../store/menu'
import useAppStore from '@apps/_share/store/app'
import { Tree } from '@pkgs/utils'
import useConfigStore from '../../../store/config'
import useMenuStore from '../../../store/menu'
import useTabStore from '../../../store/tab'

const appStore = useAppStore()
const menuStore = useMenuStore()
const tabStore = useTabStore()
const configStore = useConfigStore()

const customStyle = computed(() => {
  return { '--el-text-color-regular': configStore.getPageRegionColor.HEADER.text }
})

const list = computed(() => {
  const tree = new Tree<IMenu>({
    key: 'code',
    title: 'name',
    children: 'children',
  })
  const menus = tree.findPathNodes(menuStore.menus, menu => menu.code === tabStore.getCurrentTabCode)

  const _list = menus.map((item, index) => ({
    name: item.name,
    path: index === menus.length - 1 ? '' : item.path,
  }))

  return [
    { name: appStore.getAppName },
    ..._list,
  ]
})

</script>

<template>
  <ElBreadcrumb
    :style="customStyle"
    separator="/"
  >
    <ElBreadcrumbItem
      v-for="(item, index) in list"
      :key="index"
    >
      <div>
        {{ item.name }}
      </div>
    </ElBreadcrumbItem>
  </ElBreadcrumb>
</template>

<style lang="less" scoped>
.breadcrumb-path {
  font-weight: 700;
  text-decoration: none;
  transition: var(--el-transition-color);
  color: var(--el-text-color-primary);
  cursor: pointer;
}
.breadcrumb-path:hover {
  color: var(--el-color-primary);
}
</style>
